<template>
    <div class="main">
        <el-row :gutter="40">
            <!--左侧动态导航-->
            <el-col :span="6">
                <el-aside class="leftBox">
                    <div class="classification">
                        <el-menu class="el-menu-vertical-demo" :default-active="activePath"
                            :default-openeds="openeds" @select="handleSelect">
                            <label v-for="item in leftMenu" :key="item.name">
                                <el-submenu :index="item.name" v-if="item.children.length>0">
                                    <template slot="title">
                                        <i class="el-icon-document"></i>
                                        <span>{{item.groupname || item.name}}</span>
                                    </template>
                                    <router-link :to="{name: item.remark,query:{routerKeyPath:routerKeyPath}}" style="text-decoraction: none;">
                                        <el-menu-item v-for="children in item.children" :key="children.id"
                                            :index="children.name">
                                            {{ children.name }}
                                        </el-menu-item>
                                    </router-link>
                                </el-submenu>
                                <router-link :to="{name: item.remark,query:{routerKeyPath:routerKeyPath}}" style="text-decoraction: none;">
                                    <el-menu-item v-if="item.children.length==0" :index="item.name">
                                        <template slot="title">
                                            <i class="el-icon-document"></i>
                                            <span>{{item.groupname || item.name}}</span>
                                        </template>
                                    </el-menu-item>
                                </router-link>
                            </label>
                        </el-menu>
                    </div>

                    <!-- 创建好友分组对话框 -->
                    <!-- <el-dialog
                      title="创建新分组"
                      :visible.sync="friendGoupDialog"
                      width="20%"
                    >
                      <el-input v-model="groupName"></el-input>
                      <span slot="footer" class="dialog-footer">
                        <el-button @click="friendGoupDialog = false">取 消</el-button>
                        <el-button type="primary" @click="addFriendGroup">确 定</el-button>
                      </span>
                    </el-dialog> -->
                </el-aside>
            </el-col>
            <!-- 动态获取对应页面 -->
            <el-col :span="18">
                <router-view></router-view>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        computed: {
            ...mapState({
                user: state => state.userModule.user,
                otherUserInfo: state => state.userModule.otherUserInfo
            })
        },
        data() {
            return {
                activePath: 'allFollow',
                openeds: ["1", "5"], // 导航栏默认展开列表
                groupName: "", // 组名称
                friendGoupDialog: false, // 好友分组对话框
                props: {
                    multiple: true
                },
                leftMenu: [], //左侧动态菜单
                groupList: [{
                        value: 1,
                        label: "老师"
                    },
                    {
                        value: 2,
                        label: "同班"
                    },
                    {
                        value: 3,
                        label: "校友"
                    },
                    {
                        value: 4,
                        label: "最亲"
                    },
                    {
                        value: 5,
                        label: "学校"
                    }
                ], //好友分组列表
                friendGoupList: [], // 好友列表
                routerKeyPath:''
            };
        },
        mounted() {
            this.getConcernedTreeList();
        },
        methods: {
            //选择变化时 
            handleSelect(key, keyPath) {
                this.routerKeyPath = keyPath
            },
            //添加分组确认框
            addFriendGroup() {
                this.$confirm("确认添加“" + this.groupName + "”分组？")
                    .then(_ => {})
                    .catch(_ => {});
            },

            // 获取左侧关注列表
            getConcernedTreeList() {
                this.$store.dispatch('studentAnsweringModule/concernedTreeList',{
                    hisUserId: this.otherUserInfo.userid
                }).then(res => {
                    this.leftMenu = res.data.result;
                })
            },
            // 粉丝-已关注
            getAddFollow() {
                this.$store.dispatch('commonArticleModule/addFollow', this.user.userId).then(res => {
                })
            }
        },
        created() {}
    };
</script>

<style lang="scss" scoped>
    a {
        text-decoration: none;
    }

    .router-link-active {
        text-decoration: none;
    }

    .leftBox {
        background: #fff;
        padding: 5px;
        width: 240px;

        .classification {
            box-sizing: border-box;

            .el-menu .el-menu .el-submenu,
            .el-menu {
                min-width: 290px;
                text-align: left;
                border-right-width: 0;
            }

            .portrait {
                margin: 10px;
                text-align: center;

                p {
                    margin: 0;
                    padding: 0
                }

                .carouselSpan {
                    font-size: 12px;
                    color: #375c04;
                }
            }
        }
    }

    .main {
        min-height: 700px;
        overflow: hidden
    }

    .el-aside {
        overflow: hidden;
    }
</style>